<!-- 同城组局页面 -->
<template>
	<view class="page-box">
		<view class="artist-box-t">
			<view class="header">
				<!-- 重写的定位组件 -->
				<locationBox ref="location"></locationBox>

				<view class="search">
					<uv-search v-model="search" height="28"  placeholder="友伴姓名/标签"
						@custom="handleSearch" @clear="searchClear">
					</uv-search>
				</view>

				<!-- 筛选按钮 -->
				<!-- <view class="header-right" @click="setScreenPopShow(true)">
					<uni-icons custom-prefix="iconfont2" type="icon-shaixuan" size="40rpx" color="#333"></uni-icons>
					<text>筛选</text>
				</view> -->
			</view>
		</view>

		<!-- 个人发布 -->
		<view class="content">
			<Personage :data="personageData" @setTabsValue="setTabsValue" :status="moreStatus"
				:classifyData="classifyData"></Personage>
		</view>


		<tabBar v-if="tabBarShow"></tabBar>


		<!-- 悬浮按钮 -->
		<fab-all></fab-all>
	</view>
</template>

<script>
	// vuex引入
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	import Personage from './components/personage/personage.vue'


	// api请求
	import {
		indexActivityApp, // 活动列表
	} from '@/api/activity.js'


	export default {
		name: 'activity',
		components: {
			Personage // 个人发布
		},
		data() {
			return {
				current: 0,
				diamondList: [],
				activeCateList: [],
				dictValue: '',

				search: '', // 搜索框数据


				// 个人发布
				personageData: [], // 个人发布的数据
				personageCurrent: 1, // 个人发布当前页
				tabsValue: '', // 个人发布tabs选择数据
				classifyData: [], // 个人发布分类数据

				moreStatus: 'loading', // 是否显示加载中
				tabBarShow: true, //是否显示tabBar

			}
		},
		computed: {
			...mapGetters(['locationInfo','userInfo']),
			
			...mapState({
				isShow: state => state.user.isShow
			}),
		},


		onHide() {
			// 当离开页面而不是离开应用时，恢复正常
			this.setIsShow(true)


			// 隐藏页面时关闭选择弹窗
			this.$refs.location.closePopShow()
		},


		async created() {

			// 获取艺人分类
			this.classifyData = await this.getCate({})
		},


		async onShow() {

			// 设置TabBar的当前页
			this.setTabCurrent(1)

			// 拦截
			if (!this.isShow) return

			// 初始化
			this.init()
		},


		// 滚动到到底部
		onReachBottom() {

			// 获取个人发布的数据
			this.applicantList({
				pageNum: this.personageCurrent,
				pageSize: 10
			})

		},
		watch: {
			'locationInfo.cityCode': function() {
				this.init()
			}
		},
		methods: {
			...mapActions('home', ['getCate']),
			...mapActions(['getCheckMethod']),
			...mapMutations(['setTabCurrent', 'setIsShow']),

			/**
			 * 初始化
			 */
			init() {
				if(Object.keys(this.userInfo).length<1){
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
				
				// 没有离开页面，只要发起请求后也同样恢复正常
				this.setIsShow(true)

				// 判断登录状态跳转页面
				this.getCheckMethod()

				this.moreStatus = 'loading'

				// 个人发布数据清空
				this.personageData = []

				// 个人发布数据页码清零
				this.personageCurrent = 1

				// 获取个人发布的数据
				this.applicantList({
					pageNum: this.personageCurrent,
					pageSize: 10
				})

			},

			/**
			 * 更改个人发布的tabs
			 */
			setTabsValue(val) {
				this.tabsValue = val
				this.init()
			},


			/**
			 * 请求个人发布的报名列表
			 */
			async applicantList(params) {

				// 添加tabs数据
				if (this.tabsValue !== '') {
					params['type'] = this.tabsValue
				}

				// 添加经纬度和城市
				for (let key in this.locationInfo) {
					if (this.locationInfo[key] !== '') {
						params[key] = this.locationInfo[key]
					}
				}
				
				/**
				 * 添加搜索
				 */
				if(this.search !== ''){
					params['keywords'] = this.search
				}

				const res = await indexActivityApp(params);
				if (res.code !== 200) return

				if (res.rows.length < 10) {
					this.moreStatus = 'noMore'
				}
				this.personageData.push(...res.rows)

			},


			// 查询
			handleSearch(value) {
				this.search = value
				this.init()
			},
			
			/**
			 * 清除搜索
			 */
			searchClear(){
				this.search = ''
				this.init()
			},
			
			
			/**
			 * 打开筛选
			 */
			setScreenPopShow(val) {
				console.log('打开筛选');
				// this.screenPopShow = val
			},

		}
	}
</script>

<style lang="less" scoped>
	.page-box {
		position: relative;
		box-sizing: border-box;
		#flex(column, -, -);
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;


		.artist-box-t {
			#flex(column, -, -);
			#padding(30rpx 0 0 0);

			z-index: 2;

			.header {
				#flex(-, -, center);
				box-sizing: border-box;
				padding: 0 24rpx;

				.search {
					flex: 1;
					border-radius: 26rpx;
					margin-left: 24rpx;
				}

				.placeholder {
					width: 70rpx;
				}


				.header-right {
					#box(60rpx);
					#flex(column, center, center);
					#font(24rpx, #666);
					line-height: 36rpx;
				}
			}

		}

		&-c {
			padding: 0 32rpx;
		}

		.diamond-box {
			display: flex;
			flex-wrap: wrap;
			margin: 16rpx 0 -32rpx 0;

			.select {
				text {
					color: #E27C8A;
				}
			}

			.item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #0F0D21;
				font-size: 20rpx;
				margin-bottom: 32rpx;
				// position: relative;
				// z-index: 3;

				&>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					background-color: #D5CFD2;
					border-radius: 50%;

					&>image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				text {
					margin-top: 8rpx;
				}
			}
		}


	}
</style>